<template>
  <div>
    <special/>
    <div id="fanhui" @click="fanHui"><i class="el-icon-back"></i></div>
    <div id="tittle">注 册</div>
    <div id="touxiang">
      <img
        src="https://pic1.imgdb.cn/item/6360bb4b16f2c2beb12e2151.png"
        alt=""
      />
    </div>
    <div id="middle">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="75px" class="demo-ruleForm">
  <el-form-item label="创建用户:" prop="number" style="font-weight:bold">
    <el-input v-model.number="ruleForm.number"></el-input>
  </el-form-item>
  <el-form-item label="登录密码:" prop="pass" style="font-weight:bold">
    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="确认密码:" prop="checkPass" style="font-weight:bold">
    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="联系电话:" prop="iphone" style="font-weight:bold">
    <el-input v-model.number="ruleForm.iphone"></el-input>
  </el-form-item>
  <el-form-item style="margin-left:-20px">
    <el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
    <el-button type="primary" @click="fanHui">返回</el-button>
  </el-form-item>
</el-form>
    </div>
  </div>
</template>

<script>
import Special from "@/components/Special/special.vue";
import {addUser} from "@/api/users.js"
export default {
  components: { Special },
  data() {
      var checkNumber = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('账号不能为空'));
        }
        setTimeout(() => {
          callback();
        }, 1000);
      };
      var checkIphone = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('电话不能为空！！'));
        }
        setTimeout(() => {
          callback();
        }, 1000);
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        ruleForm: {
          pass: '',
          number: '',
          iphone:''
        },
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          number: [
            { validator: checkNumber, trigger: 'blur' }
          ],
          iphone:[
          { validator: checkIphone, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
        }
      };
    },
    methods: {
      fanHui(){
        this.$router.push("/login")
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$store.commit("ADD",this.ruleForm)
            if(sessionStorage.token){
              sessionStorage.removeItem("userName")
              sessionStorage.removeItem("token")
            }
            let newObj={
              "dateTime":new Date().getTime(),
              "userName":this.ruleForm.number,
              "headPicture":'https://wincan.oss-cn-chengdu.aliyuncs.com/alien-g2a8803bfb_1280.png',
              "passworld":this.ruleForm.pass
            }
            addUser(newObj).then(res=>{
              
            }).catch(
              error=>{
                console.log(error)
              }
            )
            this.$message({
            message: '注册成功！',
            type: 'success'
        });
          this.$router.push("/login")
          } else {
            this.$message.error('登录信息有误哦！！');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
};
</script>

<style lang="less" scoped>

#fanhui{
    float: left;
    font-size: 23px;
    font-weight: bold;
    
}
#middle{
    // width: 94vw;
    // margin-top: 10px;
    padding-right:20px ;
}
#tittle {
    font-size: 20px;
    margin-top: 10px;
    font-weight: bold;
}
#touxiang {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  background-color: white;
  margin: 40px auto;
  margin-bottom: 20px;
  img {
    margin-top: 10px;
    height: 180px;
    width: 180px;
    border-radius: 50%;
  }
}
</style>
<style>
.el-message{
  min-width: 250px !important;
  margin-top: 30px;
}
.el-message--error .el-message__content {
  width: 250px;
}
</style>